課程目的:

這次的內容是製作一個網頁計時器，並且顯示結束時的時間
作品實做

本次功能實作重點：

• 抓取DOM元素以及監聽
• 啟動計時器
• 倒數顯示在頁面上
• 頁面顯示結束時間

抓取DOM元素以及監聽

const button = document.querySelectorAll(".timer__controls >button");
const custom = document.querySelector("#custom");
const endTime = document.querySelector(".display__end-time");
const timeLeft = document.querySelector(".display__time-left");
let countdown; // 用來存儲計時器的變量

//將取得的秒數轉為數字型別
function startTimer(e) {
  let seconds = parseInt(this.dataset.time); //將取得的秒數轉為數字型別
  timer(seconds); //啟動計時器
}

// 為每個計時按鈕綁定點擊事件監聽器
button.forEach((item) => {
  item.addEventListener("click", startTimer);
});

//處理表單自定義時間的提交事件
custom.addEventListener("submit", function (e) {
  e.preventDefault(); //防止提交後頁面重新加載
  let mins = parseInt(this.minutes.value); //輸入的分鐘數，並轉換為數字型別
  if (mins) {
    timer(mins * 60); //將分鐘數轉換為秒數，並啟動計時器
    this.reset(); //重置表單
  } 
});

啟動計時器

//計時器函式
function timer(sec) {
  clearInterval(countdown); //清除任何已經在運行的計時器，防止重複
  let timeNow = Date.now(); //取得現在時間，單位為毫秒
  let end = timeNow + sec * 1000; //計算結束的總毫秒
  
  //執行顯示結束時間函式
  lastTime(end);
  //執行倒數計時函式
  setCountdown(end);
}

倒數顯示在頁面上

function setCountdown(end) {
  countdown = setInterval(() => {
    const secLeft = Math.floor((end - Date.now()) / 1000); //計算剩餘的秒數
    if (secLeft >= 0) {
      //計算秒及分鐘數
      let displaySec = secLeft % 60;
      let displayMin = Math.floor(secLeft / 60);
      timeLeft.innerText = `${displayMin}:${displaySec}`; //將倒數顯示在頁面上
    } else {
      clearInterval(countdown); //// 當計時器結束時，清除倒數計時器
    }
  }, 16); // 每16毫秒（接近螢幕刷新率）運行一次來更新剩餘時間
}

頁面顯示結束時間

function lastTime(end) {
  let endDate = new Date(end); //將時間戳轉換成日期物件
  let dateHour = endDate.getHours(); //取得小時數
  let dateMin = endDate.getMinutes(); //取得分鐘數
  dateMin = dateMin < 10 ? "0" + dateMin : dateMin; //如果分鐘數小於10，前綴增加"0"
  endTime.textContent = `Back at ${dateHour}:${dateMin}`; //將時間顯示在頁面上
}

導讀文件以及學習資源

29 - Countdown Timer
JS30